<template>
  <div style="width: 100%;height: 100%;box-sizing: border-box;" class="view flex-row">
       <el-card shadow="never" class="box-p">
          <el-tabs v-model="active"   class=" m-r-10">
            <el-tab-pane label="资金状况" name="1">
                  <!-- <el-date-picker
                    v-model="date"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                  </el-date-picker> -->
                  <div class="view flex-row align-center">
                    <div style="margin-right: 15px;">
                      <div style="margin-bottom:10px;">开始时间：</div>
                      <el-date-picker
                          style="width:170px;"
                          v-model="date1"
                          size="mini"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择开始时间">
                        </el-date-picker>
                    </div>
                    <div>
                        <div style="margin-bottom:10px;">结束时间：</div>
                        <el-date-picker
                          v-model="date2"
                          style="width:170px;"
                          type="date"
                          size="mini"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择结束时间">
                        </el-date-picker>
                    </div> 
                  </div>
                     
            </el-tab-pane>
            <el-tab-pane label="历史成交" name="2">
                <!-- <el-date-picker
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    v-model="date"
                    type="datetimerange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                  </el-date-picker> -->
                  <div class="view flex-row align-center">
                    <div style="margin-right: 15px;">
                      <div style="margin-bottom:10px;">开始时间：</div>
                      <el-date-picker
                          style="width:170px;"
                          v-model="date1"
                          size="mini"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择开始时间">
                        </el-date-picker>
                    </div>
                    <div>
                        <div style="margin-bottom:10px;">结束时间：</div>
                        <el-date-picker
                          v-model="date2"
                          style="width:170px;"
                          type="date"
                          size="mini"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择结束时间">
                        </el-date-picker>
                    </div> 
                  </div>
            </el-tab-pane>
            <el-tab-pane label="结算单" name="3">
              <!-- <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                  </el-date-picker> -->
                  <div class="view flex-row align-center">
                    <div style="margin-right: 15px;">
                      <div style="margin-bottom:10px;">开始时间：</div>
                      <el-date-picker
                          style="width:170px;"
                          v-model="date1"
                          size="mini"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择开始时间">
                        </el-date-picker>
                    </div>
                    <div>
                        <div style="margin-bottom:10px;">结束时间：</div>
                        <el-date-picker
                          v-model="date2"
                          style="width:170px;"
                          type="date"
                          size="mini"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择结束时间">
                        </el-date-picker>
                    </div> 
                  </div>
            </el-tab-pane>
            <el-tab-pane label="出入金" name="4">
              <!-- <el-date-picker
                    v-model="date"
                    type="datetimerange"
                    format="yyyy-MM-dd"
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right">
                  </el-date-picker> -->
                  <div class="view flex-row align-center">
                    <div style="margin-right: 15px;">
                      <div style="margin-bottom:10px;">开始时间：</div>
                      <el-date-picker
                          style="width:170px;"
                          v-model="date1"
                          size="mini"
                          type="date"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择开始时间">
                        </el-date-picker>
                    </div>
                    <div>
                        <div style="margin-bottom:10px;">结束时间：</div>
                        <el-date-picker
                          v-model="date2"
                          style="width:170px;"
                          type="date"
                          size="mini"
                          format="yyyy-MM-dd"
                          value-format="yyyy-MM-dd"
                          placeholder="请选择结束时间">
                        </el-date-picker>
                    </div> 
                  </div>
            </el-tab-pane>
          </el-tabs>
          <div class="view align-center justify-center m-t-20">
            <el-button @click="search" class="w150" >查询</el-button>
          </div>
          
      </el-card>
      
      <query1 v-if="active == '1'" :date="date" ref="q1"/>
      <query2 v-if="active == '2'" :date="date" ref="q2"/>
      <query3 v-if="active == '3'" :date="date" ref="q3"/>
      <query4 v-if="active == '4'" :date="date" ref="q4"/>

  </div>
</template>

<script>
import { mapState } from 'vuex';
import query1 from './tables/query1';
import query2 from './tables/query2';
import query3 from './tables/query3';
import query4 from './tables/query4';
export default {
  components: {
    query1,
    query2,
    query3,
    query4
  },
  computed: mapState({
    select: state => state.trade.select /* 当前选中股指 */,
    symbol: state => state.trade.symbol /* 全部行情 */,
    symbos: state => state.trade.symbos /* 当前页面显示杨青 */,
    ticket: state => state.trade.ticket /* 推送数据 */,
    optionlist: state => state.trade.optionlist /* 全部合约代码 */
  }),
  name: 'query',
  data() {
    return {
      active: '1',
      date1: '',
      date2: ''
    };
  },
  computed: {
    date() {
      if (this.date1 && !this.date2) {
        return [this.date1, '']
      } else if (this.date2 && !this.date1) {
        return ['', this.date2]
      }
      return [this.date1,this.date2]
    },
  },
  mounted() {
  },
  methods: {
    search() {
      if (this.active) {
        this.$nextTick( () => {
          if (this.active == 3) {
            this.$refs[`q${this.active}`].getData()
          } else {
            this.$refs[`q${this.active}`].getList()
          }
          
        })
        
      }
      
    }
  }
};
</script>

<style scoped lang="less">
/deep/ .el-table{
 * {
   color: #000;
 }
}
/deep/.el-table th{
background-color: #d8e2ea;
}
/deep/.box-p {
  .el-card__body {
    padding-top: 0;
    padding-left: 10px;
    padding-right: 10px;
  }
}
.box-p {
  height: 385px;
}
</style>
